<script type="text/javascript" src='{$base_dir}js/AJAX_Laboratory.js'></script>
{literal}
<script type="text/javascript">
	$(document).ready(function(){
		$('table#laboratories tr:even').addClass('alt');
		// From parent page
		$('div#barLoading').hide("slow");
		$('div#pageContent').show("slow");	
	});
</script>
{/literal}
<form name="addLabForm" id="addLabForm">
<input type="hidden" name="lab_id" id="lab_id" value="{$lab_id}"> 
<input type="hidden" name="recordId" id="recordId" value="{$recordId}">
<div class="form_container" style="width: 490px;">
	<span id='statusMessageLab' class='formAlertMsg'></span><br/>
	<table id="addLaboratory" cellspacing='0' cellpadding='0'>
		<thead>
			<tr>
				<td class="label" colspan="4">{translate}Test and clinical examination information{/translate}</td>
			</tr>
		</thead>
		<tbody>
		<tr>
			<td class='label'>{translate}Test name{/translate} (*)</td>
			<td>
				<!-- <input type="text" id="lab_name" name="lab_name" size="20"> -->
				<select name="lab_name" id="lab_name" onchange="hideAlertMsg('statusMessageLab');">
					{html_options options=$diagnosisList}
				</select>
			</td>
			
			<td class="btn" rowspan="2" width="100px">
				<div id="addLabBtn">
					<a class='imgBtn' href="javascript:addLaboratoryItem();">
						<img title='{translate}Add info{/translate}' src="{$base_uri}/images/add.png"/>
					</a>
				</div>
				<div id="loading" style="display:none;">
					<img src="{$base_uri}/images/ajax-loader.gif"/>
				</div>
			</td>
			
		</tr>
		<tr>
			<td class='label'>{translate}Result{/translate} (*)</td>
			<td><textarea id="lab_description" name="lab_description" cols="30" rows="3"></textarea></td>
		</tr>
		</tbody>
	</table>
</div>
</form>
<br/>
<form name="editLabForm" id="editLabForm">
<table id="laboratories" class="grid" cellspacing="0" cellpadding="0" width="700px"> 
    <thead>
        <tr>
            <th width="120" align="center" class='first'>{translate}Test name{/translate}</th>
            <th width="240" align="center">{translate}Result{/translate}</th>
            <th width="120" align="center">{translate}Dr/Technician updated{/translate}</th>
            <th width="90" align="center">{translate}Date updated{/translate}</th>
            <th width="" class="last">&nbsp;</th>
        </tr>
    </thead>        
    <tbody>
    {if !empty($laboratoryItems)}
        {foreach from=$laboratoryItems item=labItem}
        <tr>       
            <td class='first' valign='top'>
            	<span id="oldName_{$labItem.id}">{$labItem.lab_name}</span>
            </td>   
            <td valign='top'>
            	<span id="oldDesc_{$labItem.id}">{$labItem.description}</span>
            </td>
            <td valign='top'>{$labItem.doctor_name}</td>
            <td valign='top'>{$labItem.updated}</td>
            <td valign='top' class='action last'>
            	<a id="{$labItem.id}" href="javascript:deleteLabItem({$labItem.id})">
            		<img src="../images/remove_small.png" title="{translate}Delete{/translate}">
            	</a> 
            </td>
        </tr>
        {/foreach}
    {else}
        <tr id='noresult'>    
            <td class='first last' colspan='5'>{translate}There is no test and clinical examination information{/translate}</td>
        </tr>
    {/if}
    </tbody>
</table>
</form>